<template>
    <div class="clearfix m-header">
        <div class="row">
            <div class="column"><a href="/" class="logo"></a></div>
            <div class="column text-right"><a href="javascript:void(0);" @click="change">{{ $i18n.locale == "zh-CN" ? $t("lang.zh-HK") : $t("lang.zh-CN") }}</a></div>
        </div>
    </div>
</template>
<script>
import lang from "i18n/lang";

export default {
    methods: {
        change() {
            if (this.$i18n.locale == "zh-CN") {
                this.$i18n.locale = "zh-HK";
                lang.saveLocale("zh-HK");
            } else {
                this.$i18n.locale = "zh-CN";
                lang.saveLocale("zh-CN");
            }
        }
    }
}
</script>
<style scoped>
.m-header {
    background-color: $header-bg;
    height: 80px;
    line-height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;

    >.row {
        width: 1000px;
        min-width: 1000px;
        margin:  auto;
        height: 100%;

        .column {
            width: 50%;
            float: left;
            height: 100%;
        }
    }
}


.logo {
    display: inline-block;
    width: 137px;
    height: 44px;
    vertical-align: middle;
    background-image: url(../../../../static/images/logo_v2.png);
}
</style>